<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="vm">
        <ul>
            <li is="row"></li><!-- 直接用<row></row>会导致无法识别，因为ul标签内应该是li标签 -->
            <li ref="hello" @click="handle">hello</li><!-- ref获取dom节点 -->
        </ul>
    </div>
    <script>
        Vue.component('row',{
            //data:function(){return{} ;}为了确保组件不共用同一数据，子组件的data必须是函数且return对象 ，这样每次都是不同的数据
            template:'<tr><td>this is a row</td></tr>'
        })
        var vm=new Vue({
            el:'#vm',
            methods:{
                handle:function(){
                    console.log(this.$refs.hello);
                }
            }
        })
    </script>
</body>
</html>